<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<div>
<!-- 视频上传区域 -->
		<div style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#E5E9EF;">
			<div style="margin:50px 0px;"><font color="red" size="+1">*</font><font color="black" size="+2">文件上传</font><font color="grey"> (只支持ogg,mp4视频格式,视频大小不超过200M)</font></div>
				<div>
					<div id="uploader" class="wu-example">
						<!--用来存放文件信息-->
						<div id="thelist" class="uploader-list"></div>
					</div>
					<div id="picker" style="margin:30px 0px;">
					㊉上传视频
					</div>
				</div>
		</div>
		
		<!-- 基本信息区域 -->
		<div id="baisc-info" style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#E5E9EF;">
			<div style="margin:30px 0px;"><font color="black" size="+2">基本信息</font></div>
			<div>
				<div>
					<font color="red" size="+1">*</font><font color="#101010" size="+0.7">视频封面设置</font><font color="grey"> (格式推荐180X240)</font>
				</div>
				<div style="margin:20px 0px;">
					<a id="choose_img"  href="#" style="width:180px;height:240px;" class="thumbnail">
      					<img id="showImg" width="180px" height="240px" src="img/uploadPic.png">
   					 </a>
				</div>
			</div>
			
			<div style="margin:10px 0px;">
				<font color="red" size="+1">*</font><font color="#101010" size="+0.7">类型</font>
			</div>
			<div class="dropdown">
			    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
			      视频
			      <span class="caret"></span>         
			    </button>
			     
			    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
			      <li>
			         <a class="clickIsFilm">视频</a>            
			      </li>
			    
			      <li >
			         <a   class="clickIsFilm" data-toggle="tooltip" data-placement="left" title="电影类型会获得优秀曝光率">电影</a>             
			      </li>
			    </ul>
			</div>   
			
			<div style="margin:10px 0px;">
				<font color="red" size="+1">*</font><font color="#101010" size="+0.7">分区</font>
			</div>
			
			<div id="showType">
			
			</div>
			
			<div style="margin:10px 0px;">
				<font color="red" size="+1">*</font><font color="#101010" size="+0.7">标题</font>
			</div>
			<input id="tvname" type="text"  autocomplete="off"  class="form-control" name="name" placeHolder="请输入视频/影片名">
			
			<div style="margin:10px 0px;">
				<font color="red" size="+1">*</font><font color="#101010" size="+0.7">简介</font>
			</div>
			<textarea id="descri" name="descri" autocomplete="off" class="form-control" style="height:150px;" placeHolder="在这里输入视频/影片简介"></textarea>
			
			<!-- 选择电影时弹出更加详细的填充信息 -->
			<div id="showfilmDetail" style="margin:10px 0px;display:none;">
				<div style="margin:10px 0px;">
					<font color="#101010" size="+0.7">上映时间</font>
				</div>
				<input id="showdate" type="text"   autocomplete="off"  class="form-control form_datetime" name="showdate">
			
				<div style="margin:10px 0px;">
					<font color="#101010" size="+0.7">主演</font><font color="grey"> 以"；"隔开</font>
				</div>
				<input id="actor" type="text"  autocomplete="off"  class="form-control" name="actor">
			</div>
			<button  type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" style="margin:20px 0px;">立即投稿</button>
		</div>
		
		
		<!-- 图片上传区域的隐藏模块 -->
		<input id="tv_img" accept="image/*" type="file"  autocomplete="off"  name="tv_img" onchange ="uploadImg()"/>
		<!-- 上传图片后服务器返回图片存储位置 -->
		<input id="img_url" type="hidden"  autocomplete="off"  name="img_url">
		<!-- 视频传输完成后返回 -->
		<input id="video_url" type="hidden"  autocomplete="off"  name="video_url">
</div>
<script>
//获取分区类型的ajax

function uploadType(){
	$.ajax({
		 url: "isfilm_type?isfilm="+isfilm,
         type: "POST",
         dataType:"json",
        success: function (data) {
        	var lsTypes = data;
        	var htmlStr = "";
        	for(var i = 0;i< lsTypes.length;i++){
        		htmlStr+="<button type='button' class='btn btn-default showButtonType' style='margin:0px 10px;' val='"+lsTypes[i].id+"'>"
        		htmlStr+=lsTypes[i].descri;
        		htmlStr+="</button>"
        	}
        	$("#showType").html(htmlStr);
        },
        error:function(data){
        }
	});
}

</script>
<script>
/* 网页的初始化 */
 
 var fileTypeArr = new Array();
 var isfilm = "N";
 var isUploaded = false;
 var isSubmit = false;
 /* 隐藏图片选择框 */
 $("#tv_img").hide();
/*电影类型的提示信息*/
 $(function () { $("[data-toggle='tooltip']").tooltip(); 
 	//加载完成后查询分区
 	uploadType();
 });
 $("body").on("click",".showButtonType",function(){ 
	 var id = $(this).attr("val");
	 if($(this).hasClass('btn-success')){
		 fileTypeArr.remove(id);
	 }else{
		 var count=-1;
		 for(i in fileTypeArr){
			 count++;
		 }
		 fileTypeArr[count]=id;
	 }
     $(this).toggleClass("btn-success");
});  
</script>
<script>
function addForm(){
		//数据提交
		var modelTv = {};
		var tv = {};
		tv.img_url = $("#img_url").val();
		tv.video_url = $("#video_url").val();
		tv.name = $("#tvname").val();
		tv.actor = $("#actor").val();
		tv.showdate = $("#showdate").val();
		tv.descri = $("#descri").val();
		modelTv.tv = tv;
		modelTv.ids = fileTypeArr;
		var jsonData =JSON.stringify(modelTv);
		console.log(jsonData);
		$.ajax({
			url:"admin_addTv",
			data:jsonData,
			type : 'post',
			contentType : 'application/json;charset=UTF-8', 
			success:function(data){
				console.log(data);
				if(data=='SUCCESS'){
					alertModal("modalSubSuccess");
					 setTimeout(function(){
						 location="/fore_indexPage";
					    },1500);
				}
			}
		});
}

function checkThisEmpty(){
	if(checkEmpty("img_url")==false){
		alertModal("modalNotNull");
		return false;
	}
	if(checkEmpty("tvname")==false){
		alertModal("modalNotNull");
		return false;
	}
	if(checkEmpty("descri")==false){
		alertModal("modalNotNull");
		return false;
	}
	if(fileTypeArr.length==0){
		alertModal("modalNotNull");
		return false;
	}
	return true;
}


/* 图片选择触发点击 */
$("#choose_img").click(function(){
	 $("#tv_img").trigger("click");
});
/*视频类型点击时切换操作*/
$(".clickIsFilm").click(function(){
	var str = $(this).text();
	$("#dropdownMenu1").html(str+" <span class='caret'></span>");
	if(str=='电影'){
		fileTypeArr = new Array();
		$("#showfilmDetail").show(1000);
		isfilm = "Y";
		uploadType();
	}else if(str=='视频'){
		//重新选择时初始化数组、上映时间、演员信息
		fileTypeArr = new Array();
		$("#showdate").val("");
		$("#actor").val("");
		$("#showfilmDetail").hide(1000);
		isfilm = "N";
		uploadType();
	}
});
/*立即投稿按钮点击时隐藏全部信息*/
$("#btn-submit").click(function(){
	$('#myModal').modal('hide');
	
	if(checkThisEmpty()){
		
		if(isUploaded){
			 addForm();
		}else{
			$("#baisc-info").hide(1000);
			isSubmit = true;
		}
	}
});
</script>

<script>
/* 图片上传ajax */
function uploadImg(){
	var formData = new FormData();
	 formData.append("file", document.getElementById("tv_img").files[0]);  
	$.ajax({
		 url: "admin_uploadTvPicture",
         type: "POST",
         data: formData,
		contentType: false,
        processData: false,
        success: function (data) {
           $("#showImg").attr("src","virtual_img/"+data);
           $("#img_url").val(data);
        },
        error:function(data){
           
        }
	});
}
</script>

<script>
/* 时间插件 */
$(function(){
		/* 日历插件  选择年月日*/
		$(".form_datetime").datetimepicker({
			format: "yyyy-mm-dd",
			autoclose: true,
			showMeridian: true,
			changeYear:true,
			pickerPosition: "bottom-left",
			language: 'zh-CN',//中文，需要引用zh-CN.js包
			startView: 2,//月视图
			minView: 2,//日期时间选择器所能够提供的最精确的时间选择视图
		}); 
	});
</script>

<script>
/* 视频上传插件模块 */
var $list = $("#thelist");
var uploader = WebUploader.create({

    // swf文件路径
    swf: '/js/Uploader.swf',

    // 文件接收服务端。
    server: 'admin_uploadTv',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: {
    	id:'#picker',
    	multiple : false,// 只上传一个
    },
    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false,
    
 // 文件进入队列后自动开始上传
    auto: true,
    //分片上传设置
    chunked:true,  //允许分片
    chunkSize:20*1024*1024, //每片大小20M
  chunkRetry:4,  //分片上传失败之后的重试次数
  threads:1,  //上传并发数。允许同时最大3个上传进程
    //去重
    duplicate:true,

    //上传文件个数限制
   fileNumLimit:1,
    //单个文件大小限制  200M
    fileSingleSizeLimit:200*1024*1024,
    //传入文件格式限制，只能上传ogg格式的文件
    accept: {// 只允许选择视频文件格式
        extensions: 'ogg,mp4',
        mimeTypes: 'video/ogg,video/mp4'
    }
});
uploader.on( 'fileQueued', function( file ) {
    $list.append( '<div id="' + file.id + '" class="item">' +
        '<h4 class="info">' + file.name + '</h4>' +
        '<p class="state">等待上传...</p>' +
    '</div>' );
});
//文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress .progress-bar');

    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $('<div class="progress progress-striped active">' +
          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
          '</div>' +
        '</div>').appendTo( $li ).find('.progress-bar');
    }
	var perStr = percentage*100+"";
    $li.find('p.state').text('上传中...'+perStr.substr(0,perStr.indexOf("."))+'%');

    $percent.css( 'width', percentage * 100 + '%' );
});
uploader.on( 'uploadSuccess', function( file ,data) {
	$("#video_url").val(data._raw);
	isUploaded = true;
	/*收集页面数据*/
    $( '#'+file.id ).find('p.state').text('已上传');
	if(isSubmit){
		 addForm();
	}
});

uploader.on( 'uploadError', function( file ) {
    $( '#'+file.id ).find('p.state').text('上传出错');
});

uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
});

</script>
<script type="text/javascript"> 
Array.prototype.indexOf = function(val) { //prototype 给数组添加属性
      for (var i = 0; i < this.length; i++) { //this是指向数组，this.length指的数组类元素的数量
        if (this[i] == val) return i; //数组中元素等于传入的参数，i是下标，如果存在，就将i返回
      }
      return -1; 
    };
    Array.prototype.remove = function(val) {  //prototype 给数组添加属性
      var index = this.indexOf(val); //调用index()函数获取查找的返回值
      if (index > -1) {
        this.splice(index, 1); //利用splice()函数删除指定元素，splice() 方法用于插入、删除或替换数组的元素
      }
    };
</script>